<template>
  <div>
    <Hom>
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品货号" prop="hao">
          <el-input v-model="ruleForm.hao"></el-input>
        </el-form-item>
        <el-form-item label="上架状态" prop="date1">
          <el-select v-model="ruleForm.date1" placeholder="全部">
            <el-option label="上架" value="shanghai"></el-option>
            <el-option label="下架" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态" prop="date2">
          <el-select v-model="ruleForm.date2" placeholder="全部">
            <el-option label="未审核" value="shanghai"></el-option>
            <el-option label="以审核" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">
            查询
          </el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" border style="width: 80%;">
        <el-table-column fixed label="编号" width="80">
          <input type="radio" name="love" />
        </el-table-column>
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="factoryStatus"
          label="审核状态"
          width="120"
        ></el-table-column>
        <!-- <el-table-column prop="" label="商品图片" width="300">
          <template>
            <img
              src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/timg(5).jpg"
              alt=""
            />
          </template>
        </el-table-column> -->
        <el-table-column label="SKU库存" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text">
             <i class="el-icon-edit"></i>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">
              查看
            </el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </Hom>
  </div>
</template>
<script>
export default {
  components: {
    Hom: require('./../layout/Layout.vue').default,
  },

  methods: {
    handleClick(row) {
      //   console.log(row)
    },
    // 查询
    submitForm(formName) {
      this.axios
        .get('/brand/list', {
          headers: {
            'Content-Type': 'application/json;charset=UTF-8',
            Authorization: localStorage.getItem('token'),
          },
          keyword: this.ruleForm.name,
          pageNum: 1,
          pageSize: 10,
        })
        .then((res) => {
        //   console.log(res)
          if (res.data.code === 200) {
            this.tableData = res.data.data.list
          }
        })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
  mounted() {
    this.axios
      .get('/brand/listAll', {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          Authorization: localStorage.getItem('token'),
        },
      })
      .then((res) => {
        // console.log(res)
        if (res.data.code === 200) {
          this.tableData = res.data.data
        }
      })
  },
  data() {
    return {
      tableData: [],
      ruleForm: {
        name: '',
        hao: '',
        date1: '',
        date2: '',
      },
    }
  },
}
</script>
<style lang="scss" scoped>
.el-form {
  line-height: 40px;
  padding: 10px 20px;
  text-align: left;
  border:1px solid #eee;margin-bottom:20px
}
.el-form-item {
  width: 40%;
  display: inline-block;
}
.el-table-column{text-align:center}
</style>
